<div class="container" style="height: 100%; overflow-x: hidden;">

    <div class="clr-row animate flex-items-xs-between" style="padding-top: 15px;">
        <div class="clr-col-lg-7">

            <div class="card info-card">
                <div class="card-header title card-title-color" style="padding-top: 12px; margin-bottom: -7px">
                    Connected to
                    <mat-form-field class="chain-selector example-full-width" style="width: 207px;">
                        <mat-select [value]="network.activeChain['id']"
                                    (selectionChange)="changeChain($event)">
                            <mat-optgroup *ngFor="let group of network.selectGroup" [label]="group.name">
                                <mat-option *ngFor="let chain of group.chains" [value]="chain.id" class="chain-option">
                                    <img [src]="'./assets/chain-icons/' + chain.icon" width="28" height="28"
                                         class="chain-icon"/>
                                    {{ chain.name }}
                                </mat-option>
                            </mat-optgroup>
                        </mat-select>
                    </mat-form-field>
                </div>
                <div class="card-block">
                    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="grow" fxLayoutGap="7px">
                        <div class="advanced text-faded">Advanced option:</div>
                        <div>
                            <a (click)="network.openCustomChainModal()" class="clicked highlight-primary">
                                CUSTOM CHAIN
                            </a>
                            <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                     style="font-size: 15px;"
                                     [matTooltip]="'Connect to a custom EOSIO chain.' + '\n' +
													'Option generally used by developers.'"
                                     matTooltipClass="black-tooltip">
                            </fa-icon>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card info-card">
                <div class="card-header title card-title-color special-font">
                    Network Options
                </div>
                <div class="card-block">
                    <div class="info2">Connect to another endpoint.</div>
                    <div class="card chains-card">
                        <ng-container *ngFor="let endpoint of network.validEndpoints">
                            <div
                                    class="card-block chain-section {{network.selectedEP() === endpoint.url?'selected':''}}"
                                    (click)="selectEndpoint(endpoint)" *ngIf="endpoint.latency !== -1">
                                {{endpoint.url}}
                                <span style="float:right">latency: {{endpoint.latency}} ms</span>
                            </div>
                        </ng-container>
                    </div>
                    <div class="clr-row" style="margin-left: 0;">
                        <div class="clr-col-auto" style="padding-left: 0;">
                            <button class="btn btn-info-outline mt-1" (click)="endpointModal = true"
                                    style="font-weight: 700">Other
                            </button>
                        </div>
                        <div class="clr-col-auto">
                            <button class="btn btn-info-outline mt-1" (click)="network.connect(true)"
                                    matTooltip="Automatically connects on the fastest endpoint for you"
                                    matTooltipClass="black-tooltip" matTooltipPosition="right"
                                    style="font-weight: 700">Auto
                            </button>
                        </div>
                        <div class="clr-col-auto" *ngIf="!network.networkingReady.getValue()">
                            <fa-layers class="mt-2 mb-1">
                                <fa-icon [icon]="['far', 'spinner']" [spin]="true" size="2x"
                                         class="highlight-primary"></fa-icon>
                            </fa-layers>
                        </div>
                        <div class="clr-col my-auto" *ngIf="!network.networkingReady.getValue()"
                             style="margin-top: auto; margin-bottom: auto; padding-top: 10px;">
                            <span class="highlight-primary"
                                  style="padding-left: 17px; font-size: 18px;">Connecting...</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card info-card">
                <div class="card-header title card-title-color special-font">
                    Other Tools
                </div>
                <div class="card-block">
                    <button class="btn btn-info-outline"
                            (click)="openKeyGenModal()"
                            style="font-weight: 700">
                        Key Generator
                    </button>
                </div>
            </div>

            <div class="card info-card">
                <div class="card-header title card-title-color special-font">
                    Key/Account Management
                    <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-right">
                        <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                 style="font-size: 16px;"></fa-icon>
                        <span class="tooltip-content">Manage your imported keys.</span>
                    </a>
                </div>
                <div class="card-block">
                    <button class="btn btn-info-outline" (click)="managerKeys = true"
                            style="font-weight: 700">Manager
                    </button>
                </div>
            </div>

        </div>

        <div class="clr-col-lg-5">

            <div class="card info-card">
                <div class="card-header title card-title-color special-font">
                    Logout Options
                </div>
                <div class="card-block borderb">
                    <button class="btn btn-info-outline" (click)="logoutModal = true"
                            style="font-weight: 700">Logout from
                        <span *ngIf="app.compilerVersion === 'DEFAULT'">all chains</span>
                        <span *ngIf="app.compilerVersion !== 'DEFAULT'">{{aService.activeChain['name']}}</span>
                    </button>
                    <div class="info">*All your data will be cleared from this PC. Should you want to login again, you
                        will
                        have to import your private key again.
                    </div>
                </div>
                <div class="card-block" *ngIf="app.compilerVersion === 'DEFAULT'">
                    <button class="btn btn-info-outline" (click)="logoutChainModal = true"
                            style="font-weight: 700">Logout from {{aService.activeChain['name']}}
                    </button>
                    <div class="info">*Your data will be cleared from this PC. Should you want to login again, you will
                        have to import your private key again.
                    </div>
                </div>
            </div>

            <div class="card info-card">
                <div class="card-header title card-title-color special-font">
                    Lockscreen Pin &nbsp;
                    <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-right">
                        <fa-icon [icon]="['far','question-circle']" class="highlight-primary" style="font-size: 16px;">
                        </fa-icon>
                        <span class="tooltip-content">Small security pin <br> used to unlock the screen.</span>
                    </a>
                </div>
                <div class="card-block">
                    <button class="btn btn-info-outline" (click)="pinModal = true"
                            style="font-weight: 700">SET PIN
                    </button>
                    <button class="btn btn-danger-outline" (click)="clearPinModal = true"
                            style="font-weight: 700">REMOVE lOCKSCREEN
                    </button>
                </div>
            </div>

            <div class="card info-card" *ngIf="aService.selected.getValue().type === 'local'">
                <div class="card-header title card-title-color special-font">
                    Change Password &nbsp;
                    <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-right">
                        <fa-icon [icon]="['far','question-circle']"
                                 class="highlight-primary"
                                 style="font-size: 16px;">
                        </fa-icon>
                        <span class="tooltip-content">
							Password used to <br> sign transactions / actions.
						</span>
                    </a>
                </div>

                <div class="card-block">
                    <button class="btn btn-info-outline" (click)="changePassModal = true"
                            style="font-weight: 700">CHANGE
                    </button>
                </div>

            </div>

            <div class="card info-card">
                <div class="card-header title card-title-color special-font">
                    Backup&nbsp;
                    <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-right">
                        <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                 style="font-size: 16px;"></fa-icon>
                        <span class="tooltip-content">
							Create a backup file that can only be imported back on <span
                                *ngIf="app.compilerVersion === 'DEFAULT'">SimplEOS.</span>
							<span *ngIf="app.compilerVersion === 'LIBERLAND'">the Liberland wallet.</span>
							<br>Use your wallet with the same configuration at any device.
              </span>
                    </a>
                </div>
                <div class="card-block">
                    <div style="margin-bottom: 20px;">
                        <mat-checkbox [checked]="autoBackup" (change)="toggleAutosave($event)">Automatic Backup&nbsp;
                        </mat-checkbox>
                        <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-right">
                            <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                     style="font-size: 16px;"></fa-icon>
                            <span class="tooltip-content">Automatically backup whenever you open the wallet. The backup file will appear in the
								<span *ngIf="app.compilerVersion === 'DEFAULT'">"simpleosAutosave"</span>
								<span *ngIf="app.compilerVersion === 'LIBERLAND'">"liberlandAutosave"</span>
								 folder that is created on the same place that
								<span *ngIf="app.compilerVersion === 'DEFAULT'">SimplEOS</span>
								<span *ngIf="app.compilerVersion === 'LIBERLAND'">the Liberland wallet</span>
								is installed.</span>
                        </a>
                        <div class="info" *ngIf="backup.lastBackupTime !== ''">* Last backup on {{backup.lastBackupTime}}</div>
                    </div>
                    <button class="btn btn-info-outline" (click)="exportBKModal = true"
                            style="font-weight: 700">EXPORT
                    </button>
                    <button class="btn btn-info-outline" (click)="importBKModal = true"
                            style="font-weight: 700">IMPORT
                    </button>
                    <div style="margin-top: 20px;">
                        <button class="btn btn-info-outline" (click)="openPKModal()"
                                style="font-weight: 700">VIEW PRIVATE KEY
                            <fa-icon [icon]="['fas', 'skull-crossbones']" size="lg"></fa-icon>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<clr-modal [(clrModalOpen)]="logoutModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        Are you <span class="highlight-primary">sure</span> ?
    </h3>
    <div class="modal-body" style="overflow-y: hidden;">
        <p style="padding-bottom: 20px;">All your data will be cleared. If you want to login again you will have to
            import
            your
            private key again.</p>
        <mat-checkbox [(ngModel)]="clearContacts">Also clear contacts on logout</mat-checkbox>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger-outline" (click)="logoutModal = false">Cancel</button>
        <div>
            <button type="button" class="btn btn-info-outline" (click)="logout()">
                Yes
            </button>
            <div class="text-center text-faded mt-1" *ngIf="app.compilerVersion === 'DEFAULT'">*SimplEOS will <br> be
                restarted
            </div>
            <div class="text-center text-faded mt-1" *ngIf="app.compilerVersion === 'LIBERLAND'">*Wallet will <br> be
                restarted
            </div>
        </div>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="logoutChainModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        Are you <span class="highlight-primary">sure</span> ?
    </h3>
    <div class="modal-body" style="overflow-y: hidden;">
        <p style="margin-bottom: 20px;">Your <span class="highlight-primary">{{aService.activeChain['name']}}</span>
            data will be
            cleared . If you want to login again you will have to import
            your
            private key again.</p>
        <mat-checkbox [(ngModel)]="clearContacts">Also clear contacts on logout</mat-checkbox>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger-outline" (click)="logoutChainModal = false">Cancel</button>
        <div>
            <button type="button" class="btn btn-info-outline" (click)="logoutByCahin()">
                Yes
            </button>
            <div class="text-center text-faded mt-1" *ngIf="app.compilerVersion === 'DEFAULT'">*SimplEOS will <br> be
                restarted
            </div>
        </div>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="endpointModal" [clrModalSize]="'md'">
    <h3 class="modal-title">
        Connect to another endpoint, enter url below:
    </h3>
    <div class="modal-body">
        <mat-form-field>
            <input matInput type="text" placeholder="endpoint" #customEndpoint>
        </mat-form-field>
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="button" class="btn btn-info-outline" (click)="connectCustom(customEndpoint.value)">
            Connect
            <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="confirmModal" [clrModalSize]="'md'">
    <h3 class="modal-title" *ngIf="selectedEndpoint">
        Connect to <span class="highlight-primary">{{selectedEndpoint.url}}</span> ?
    </h3>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger-outline" (click)="confirmModal = false">Cancel</button>
        <button type="button" class="btn btn-info-outline" (click)="connectEndpoint()">
            Connect
            <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="changePassModal" [clrModalSize]="'md'">
    <h3 class="modal-title">
        <fa-icon [icon]="['fas','key']"></fa-icon>&nbsp;&nbsp;Change Password
    </h3>
    <div class="modal-body" style="min-height: 220px;">
        <form [formGroup]="passForm">
            <!--			OLD PASS-->
            <mat-form-field class="mt-1 pass-input">
                <input matInput type="password" placeholder="Old password"
                       formControlName="oldpass">
                <mat-error *ngIf="wrongpass">
                    Wrong password!
                </mat-error>
            </mat-form-field>

            <!--			NEW PASS 1-->
            <mat-form-field class="mt-3  pass-input">
                <input matInput #pass type="password" placeholder="New password" (blur)="passCompare()"
                       [formControl]="passForm['controls'].matchingPassword['controls']['pass1']">
                <fa-icon matSuffix *ngIf="pass.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="pass.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="pass.type === 'text'" [icon]="['far', 'eye-slash']" size="lg" class="copy"
                         (click)="pass.type = 'password'"></fa-icon>
                <mat-hint align="start">
                    Min 4 characters
                </mat-hint>
                <mat-hint align="end">{{pass.value.length}} / 4+</mat-hint>
            </mat-form-field>

            <!--			NEW PASS 2-->
            <mat-form-field style="margin-top: 19px" class="pass-input">
                <input matInput #pass2 type="password" placeholder="Confirm password" (blur)="passCompare()"
                       [formControl]="passForm['controls'].matchingPassword['controls']['pass2']">
                <fa-icon matSuffix *ngIf="pass2.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="pass2.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="pass2.type === 'text'" [icon]="['far', 'eye-slash']" size="lg" class="copy"
                         (click)="pass2.type = 'password'"></fa-icon>
                <mat-error *ngIf="!passmatch">
                    Passwords do not match!
                </mat-error>
            </mat-form-field>
        </form>
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="submit"
                class="btn btn-info-outline"
                (click)="changePass()"
                [disabled]="!passForm.valid">
            Confirm
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="pinModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        Set lockscreen pin
    </h3>
    <div class="modal-body modal-pin" style="overflow-y: paged-x !important;">
        <form [formGroup]="pinForm">
            <mat-form-field class="mt-1">
                <input matInput #pin type="password" placeholder="New pin" formControlName="pin">
                <fa-icon matSuffix *ngIf="pin.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="pin.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="pin.type === 'text'" [icon]="['far', 'eye-slash']" size="lg" class="copy"
                         (click)="pin.type = 'password'"></fa-icon>
                <mat-hint align="start">
                    This pin can be anything you want
                </mat-hint>
            </mat-form-field>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" (click)="setPIN()" class="btn btn-info-outline" [disabled]="!pinForm.valid">
            Set pin
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="clearPinModal" [clrModalSize]="'sm'">
    <h3 class="modal-title">
        Are you <span class="highlight-primary">sure</span> ?
    </h3>
    <div class="modal-body">
        <p style="margin-bottom: 20px;">If you remove the lockscreen, your balance will be displayed when opening the
            wallet</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger-outline" (click)="clearPinModal = false">Cancel</button>
        <button type="button" class="btn btn-info-outline" (click)="clearPin()">
            Yes
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="importBKModal" [clrModalSize]="'md'">
    <h3 class="modal-title">
        Select your backup file:
    </h3>
    <div class="modal-body">
        <form [formGroup]="importForm">
            <button type="button" class="btn btn-info-outline"
                    (click)="inputIMClick()" style="margin-left:10px;">
                Select file
            </button>
            <mat-form-field class="mt-8">
                <input matInput type="password" placeholder="Password" formControlName="pass">
                <mat-hint align="start">
                    Password that was used to encrypt your file
                </mat-hint>
            </mat-form-field>
            <br/>
            <br/>
            <br/>
            <span class="text-faded">{{infile}}</span>
        </form>
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="button"
                class="btn btn-info-outline"
                (click)="importBK()"
                [disabled]="busy || infile === ''">
            Import
            <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
        </button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="exportBKModal" [clrModalSize]="'md'">
    <h3 class="modal-title">
        Choose where to save your backup file:
    </h3>
    <div class="modal-body">
        <form [formGroup]="exportForm">
            <mat-form-field class="mt-8">
                <input matInput #passexport type="password" placeholder="Encrypt your file" formControlName="pass">
                <fa-icon matSuffix *ngIf="passexport.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="passexport.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="passexport.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"
                         class="copy"
                         (click)="passexport.type = 'password'"></fa-icon>
                <mat-hint align="start">
                    This password can be anything you want
                </mat-hint>
            </mat-form-field>
            <button type="button" class="btn btn-info-outline" (click)="inputEXClick()" style="margin-left:10px;">
                Choose directory
            </button>
            <br/>
            <br/>
            <br/>
            <span class="text-faded">{{exfile}}</span>
        </form>

    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="button"
                class="btn btn-info-outline"
                (click)="exportBK()"
                [disabled]="busy || exfile === ''">
            Export
            <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
        </button>
    </div>
</clr-modal>

<!--VIEW PRIVATE KEY-->
<clr-modal #pkModal [(clrModalOpen)]="viewPKModal" [clrModalSize]="'md'" (clrModalOpenChange)="closePkModal();">
    <h3 class="modal-title" style="color: var(--text-error) !important">
        Caution
        <fa-icon [icon]="['fas', 'exclamation-triangle']"></fa-icon>
    </h3>
    <div class="modal-body">
        <div *ngIf="claimKey">
            Saved claim private key
            <mat-form-field style="width: 350px; margin-top: 25px;">
                <input matInput placeholder="Claim private key"
                       [value]="claimPrivateKey" readonly>
                <fa-icon matSuffix [icon]="['far', 'clone']" size="lg" class="copy"
                         (click)="cc(claimPrivateKey)"></fa-icon>
            </mat-form-field>
        </div>
        <div *ngIf="!showpk && !claimKey">
            <h4>Are you <span class="highlight-primary">sure</span> you want to see the active private key of the
                account <span class="highlight-primary">{{selectedAccount}}</span>?</h4>
            <div class="text-faded">*Your private key is the only access to your account, so it should always be
                kept in a safe place.
            </div>
            <form [formGroup]="showpkForm" (keyup.enter)="viewPK()" class="mt-3">
                <mat-form-field>
                    <input matInput type="password" placeholder="Password" formControlName="pass">
                </mat-form-field>
                <button type="button" class="btn btn-info-outline" style="margin-left:10px;" (click)="viewPK()">
                    YES, SHOW ME
                    <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
                </button>
            </form>
        </div>
        <div *ngIf="showpk && !claimKey">
            <h4>Please, save the active key on a safe place and <span class="highlight-primary">never share your private key with
				anyone.</span></h4>
            <mat-form-field style="width: 470px; margin-top: 25px;">
                <input matInput placeholder="Active private key"
                       [value]="tempPK" readonly>
                <a matSuffix class="tooltip tooltip-xs tooltip-top-left">
                    <fa-icon [icon]="['far', 'clone']" size="lg" class="copy" (click)="cc(tempPK)"></fa-icon>
                    <span class="tooltip-content">Copy</span>
                </a>
            </mat-form-field>
        </div>
    </div>
    <div class="modal-footer">
        <div fxLayout="column" style="width: 100%; padding: 0 .15rem;">
            <div class="error error-modal-footer" *ngIf="pkError !== ''">
                <fa-icon [icon]="['fas','exclamation-triangle']" class="mr-1"></fa-icon>
                {{pkError}}
            </div>
        </div>
    </div>
    <div class="modal-footer text-faded" *ngIf="showpk">
        This window will close in {{timetoclose}}s...
    </div>
</clr-modal>

<!--GENERATE KEYS-->
<app-keygen-modal></app-keygen-modal>

<!--MANAGE KEYS-->
<clr-modal #managepkModal
           [(clrModalOpen)]="managerKeys"
           [clrModalSize]="'lg'"
           (clrModalOpenChange)="populateAccounts()">
    <h3 class="modal-title">
        Key/Account Management
    </h3>
    <div class="modal-body" style="min-height: 30vh;">
        <clr-tabs clrLayout="vertical">
            <clr-tab *ngFor="let key of localKeys; let idx = index">
                <button style="font-family: 'SourceCodePro',monospace" clrTabLink id="link1">Key {{idx + 1}}:
                    <span>
						{{key.slice(0, 5)}}...{{key.slice(key.length - 4, key.length)}}
					</span>
                </button>
                <clr-tab-content [id]="'content'+idx" *clrIfActive>
                    <div style="font-weight: 600" class="highlight-primary">PUBLIC KEY:</div>
                    <div class="highlight">{{key}}
                        <button class="btn btn-sm btn-danger-outline" (click)="removeKey(key);">
                            <fa-icon [icon]="['far','trash-alt']"></fa-icon>
                            Remove key
                        </button>
                        <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right">
                            <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                     style="font-size: 16px;"></fa-icon>
                            <span class="tooltip-content">Remove all accounts associated with this private key from SimplEOS <br>
							This will not delete your accounts from the blockchain, just remove them from SimplEOS</span>
                        </a>
                    </div>
                    <div style="margin-top: 20px; font-weight: 600" class="highlight-primary">Associated imported
                        accounts:
                    </div>
                    <div *ngFor="let a of keysaccounts.get(key)" fxLayout="row" fxLayoutAlign="start center">
                        <div fxFlex="29">{{a.account.name}}@{{a.permission}}</div>
                        <button (click)="removeAccount(a.account.name,true)" class="btn btn-sm btn-danger-outline"
                                style="min-width: unset; padding: 0 5px; margin-left: 7px">
                            <fa-icon [icon]="['far','trash-alt']"></fa-icon>
                        </button>
                        <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right">
                            <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                     style="font-size: 16px;"></fa-icon>
                            <span class="tooltip-content">Remove this account from SimplEOS <br>
							This will not delete your account from the <br>
							blockchain, it will just remove it from SimplEOS</span>
                        </a>
                    </div>
                </clr-tab-content>
            </clr-tab>
            <!--			<clr-tab>-->
            <!--				<button clrTabLink>Key 2</button>-->
            <!--				<clr-tab-content *clrIfActive="true">-->
            <!--					PUBLIC KEY:-->
            <!--					Account 1<br>-->
            <!--					Account 2<br>-->
            <!--					Account 3<br>-->
            <!--				</clr-tab-content>-->
            <!--			</clr-tab>-->
        </clr-tabs>
    </div>
</clr-modal>


